Batching React: Strategi Optimisasi Pembaruan State untuk Aplikasi Berkinerja

React, sebuah pustaka JavaScript yang kuat untuk membangun antarmuka pengguna, berusaha untuk performa yang optimal. Salah satu mekanisme kunci yang digunakannya adalah batching, yang mengoptimalkan cara pembaruan state diproses. Memahami batching React sangat penting untuk membangun aplikasi yang berkinerja dan responsif, terutama saat kompleksitas meningkat. Panduan komprehensif ini akan mendalami seluk-beluk batching React, mengeksplorasi manfaatnya, berbagai strategi, dan teknik lanjutan untuk memaksimalkan efektivitasnya.

Apa itu Batching React?

Batching React adalah proses mengelompokkan beberapa pembaruan state ke dalam satu kali re-render. Daripada React melakukan re-render komponen untuk setiap pembaruan state, React akan menunggu hingga semua pembaruan selesai dan kemudian melakukan satu kali render. Hal ini secara drastis mengurangi jumlah re-render, yang mengarah pada peningkatan performa yang signifikan.

Perhatikan skenario di mana Anda perlu memperbarui beberapa variabel state dalam event handler yang sama:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setCountA(countA + 1);
    setCountB(countB + 1);
  };

  return (
    <button onClick={handleClick}>
      Tambah Keduanya
    </button>
  );
}

            

              
                Copy
              
            
          

Tanpa batching, kode ini akan memicu dua kali re-render: satu untuk setCountA dan satu lagi untuk setCountB. Namun, batching React secara cerdas mengelompokkan pembaruan ini ke dalam satu kali re-render, menghasilkan performa yang lebih baik. Ini sangat terasa ketika berhadapan dengan komponen yang lebih kompleks dan perubahan state yang sering.

Manfaat Batching

Manfaat utama dari batching React adalah peningkatan performa. Dengan mengurangi jumlah re-render, ini meminimalkan jumlah pekerjaan yang perlu dilakukan oleh browser, menghasilkan pengalaman pengguna yang lebih lancar dan responsif. Secara spesifik, batching menawarkan keuntungan berikut:

• Mengurangi re-render: Manfaat paling signifikan adalah pengurangan jumlah re-render. Ini secara langsung berarti penggunaan CPU yang lebih sedikit dan waktu rendering yang lebih cepat.
• Meningkatkan responsivitas: Dengan meminimalkan re-render, aplikasi menjadi lebih responsif terhadap interaksi pengguna. Pengguna mengalami lebih sedikit lag dan antarmuka yang lebih lancar.
• Performa yang dioptimalkan: Batching mengoptimalkan performa keseluruhan aplikasi, menghasilkan pengalaman pengguna yang lebih baik, terutama pada perangkat dengan sumber daya terbatas.
• Mengurangi konsumsi energi: Lebih sedikit re-render juga berarti pengurangan konsumsi energi, sebuah pertimbangan penting untuk perangkat seluler dan laptop.

Batching Otomatis di React 18 dan Setelahnya

Sebelum React 18, batching sebagian besar terbatas pada pembaruan state di dalam event handler React. Ini berarti bahwa pembaruan state di luar event handler, seperti yang ada di dalam setTimeout, promise, atau native event handler, tidak akan di-batch. React 18 memperkenalkan batching otomatis, yang memperluas batching untuk mencakup hampir semua pembaruan state, terlepas dari mana asalnya. Peningkatan ini secara signifikan menyederhanakan optimisasi performa dan mengurangi kebutuhan akan intervensi manual.

Dengan batching otomatis, kode berikut sekarang akan di-batch di React 18:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Tambah Keduanya
    </button>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, meskipun pembaruan state berada di dalam callback setTimeout, React 18 akan tetap melakukan batching menjadi satu kali re-render. Perilaku otomatis ini menyederhanakan optimisasi performa dan memastikan batching yang konsisten di berbagai pola kode.

Kapan Batching Tidak Terjadi (dan Cara Menanganinya)

Meskipun kemampuan batching otomatis React, ada situasi di mana batching mungkin tidak terjadi seperti yang diharapkan. Memahami skenario ini dan mengetahui cara menanganinya sangat penting untuk menjaga performa yang optimal.

1. Pembaruan di Luar Pohon Render React

Jika pembaruan state terjadi di luar pohon render React (misalnya, di dalam pustaka yang secara langsung memanipulasi DOM), batching tidak akan terjadi secara otomatis. Dalam kasus ini, Anda mungkin perlu memicu re-render secara manual atau menggunakan mekanisme rekonsiliasi React untuk memastikan konsistensi.

2. Kode atau Pustaka Lama

Basis kode yang lebih lama atau pustaka pihak ketiga mungkin mengandalkan pola yang mengganggu mekanisme batching React. Misalnya, sebuah pustaka mungkin secara eksplisit memicu re-render atau menggunakan API yang sudah usang. Dalam kasus seperti itu, Anda mungkin perlu melakukan refactor kode atau mencari pustaka alternatif yang kompatibel dengan perilaku batching React.

3. Pembaruan Mendesak yang Memerlukan Rendering Segera

Dalam kasus yang jarang terjadi, Anda mungkin perlu memaksa re-render segera untuk pembaruan state tertentu. Ini mungkin diperlukan ketika pembaruan tersebut kritis untuk pengalaman pengguna dan tidak dapat ditunda. React menyediakan API flushSync untuk situasi ini (dibahas secara rinci di bawah).

Strategi untuk Mengoptimalkan Pembaruan State

Meskipun batching React memberikan peningkatan performa otomatis, Anda dapat lebih mengoptimalkan pembaruan state untuk mencapai hasil yang lebih baik. Berikut adalah beberapa strategi yang efektif:

1. Kelompokkan Pembaruan State yang Terkait

Jika memungkinkan, kelompokkan pembaruan state yang terkait ke dalam satu pembaruan tunggal. Ini mengurangi jumlah re-render dan meningkatkan performa. Misalnya, daripada memperbarui beberapa variabel state individual, pertimbangkan untuk menggunakan satu variabel state yang menampung objek dengan semua nilai yang terkait.

            
function MyComponent() {
  const [data, setData] = React.useState({
    name: '',
    email: '',
    age: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={data.name} onChange={handleChange} />
      <input type="email" name="email" value={data.email} onChange={handleChange} />
      <input type="number" name="age" value={data.age} onChange={handleChange} />
    </form>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, semua perubahan input form ditangani oleh satu fungsi handleChange yang memperbarui variabel state data. Ini memastikan bahwa semua pembaruan state yang terkait di-batch menjadi satu kali re-render.

2. Gunakan Pembaruan Fungsional

Saat memperbarui state berdasarkan nilai sebelumnya, gunakan pembaruan fungsional. Pembaruan fungsional menyediakan nilai state sebelumnya sebagai argumen ke fungsi pembaruan, memastikan bahwa Anda selalu bekerja dengan nilai yang benar, bahkan dalam skenario asinkron.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Tambah
    </button>
  );
}

            

              
                Copy
              
            
          

Menggunakan pembaruan fungsional setCount((prevCount) => prevCount + 1) menjamin bahwa pembaruan didasarkan pada nilai sebelumnya yang benar, bahkan jika beberapa pembaruan di-batch bersama.

3. Manfaatkan useCallback dan useMemo

useCallback dan useMemo adalah hook penting untuk mengoptimalkan performa React. Keduanya memungkinkan Anda untuk melakukan memoize fungsi dan nilai, mencegah re-render yang tidak perlu pada komponen anak. Ini sangat penting saat meneruskan props ke komponen anak yang bergantung pada nilai-nilai ini.

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <ChildComponent increment={increment} />
  );
}

function ChildComponent({ increment }) {
  React.useEffect(() => {
    console.log('ChildComponent dirender');
  });
  return (<button onClick={increment}>Tambah</button>);
}

            

              
                Copy
              
            
          

Dalam contoh ini, useCallback melakukan memoize fungsi increment, memastikan bahwa fungsi tersebut hanya berubah ketika dependensinya berubah (dalam kasus ini, tidak ada). Ini mencegah ChildComponent dari re-render yang tidak perlu ketika state count berubah.

4. Debouncing dan Throttling

Debouncing dan throttling adalah teknik untuk membatasi laju eksekusi sebuah fungsi. Keduanya sangat berguna untuk menangani event yang memicu pembaruan sering, seperti event scroll atau perubahan input. Debouncing memastikan bahwa fungsi hanya dieksekusi setelah periode tidak aktif tertentu, sementara throttling memastikan bahwa fungsi dieksekusi paling banyak sekali dalam interval waktu tertentu.

            
import { debounce } from 'lodash';

function MyComponent() {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  };

  const search = (term) => {
    console.log('Mencari:', term);
    // Perform search logic here
  };

  const debouncedSearch = React.useMemo(() => debounce(search, 300), []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, fungsi debounce dari Lodash digunakan untuk melakukan debounce pada fungsi search. Ini memastikan bahwa fungsi pencarian hanya dieksekusi setelah pengguna berhenti mengetik selama 300 milidetik, mencegah panggilan API yang tidak perlu dan meningkatkan performa.

Teknik Lanjutan: requestAnimationFrame dan flushSync

Untuk skenario yang lebih lanjut, React menyediakan dua API yang kuat: requestAnimationFrame dan flushSync. API ini memungkinkan Anda untuk menyempurnakan waktu pembaruan state dan mengontrol kapan re-render terjadi.

1. requestAnimationFrame

requestAnimationFrame adalah API browser yang menjadwalkan eksekusi fungsi sebelum repaint berikutnya. Ini sering digunakan untuk melakukan animasi dan pembaruan visual lainnya dengan cara yang lancar dan efisien. Di React, Anda dapat menggunakan requestAnimationFrame untuk melakukan batch pembaruan state dan memastikan bahwa pembaruan tersebut disinkronkan dengan siklus rendering browser.

            
function MyComponent() {
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    const animate = () => {
      requestAnimationFrame(() => {
        setPosition((prevPosition) => prevPosition + 1);
        animate();
      });
    };

    animate();
  }, []);

  return (
    <div style={{ transform: `translateX(${position}px)` }}>
      Elemen Bergerak
    </div>
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, requestAnimationFrame digunakan untuk terus memperbarui variabel state position, menciptakan animasi yang mulus. Dengan menggunakan requestAnimationFrame, pembaruan disinkronkan dengan siklus rendering browser, mencegah animasi yang patah-patah dan memastikan performa yang optimal.

2. flushSync

flushSync adalah API React yang memaksa pembaruan sinkron langsung ke DOM. Biasanya digunakan dalam kasus-kasus langka di mana Anda perlu memastikan bahwa pembaruan state segera tercermin di UI, seperti saat berinteraksi dengan pustaka eksternal atau saat melakukan pembaruan UI yang kritis. Gunakan dengan hemat karena dapat meniadakan manfaat performa dari batching.

            
import { flushSync } from 'react-dom';

function MyComponent() {
  const [text, setText] = React.useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    flushSync(() => {
      setText(value);
    });
    // Perform other synchronous operations that rely on the updated text
    console.log('Teks diperbarui secara sinkron:', value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, flushSync digunakan untuk segera memperbarui variabel state text setiap kali input berubah. Ini memastikan bahwa setiap operasi sinkron berikutnya yang bergantung pada teks yang diperbarui akan memiliki akses ke nilai yang benar. Penting untuk menggunakan flushSync dengan bijaksana, karena dapat mengganggu mekanisme batching React dan berpotensi menyebabkan masalah performa jika digunakan berlebihan.

Contoh Dunia Nyata: E-commerce Global dan Dasbor Keuangan

Untuk mengilustrasikan pentingnya batching React dan strategi optimisasi, mari kita pertimbangkan dua contoh dunia nyata:

1. Platform E-commerce Global

Platform e-commerce global menangani volume interaksi pengguna yang sangat besar, termasuk menelusuri produk, menambahkan item ke keranjang, dan menyelesaikan pembelian. Tanpa optimisasi yang tepat, pembaruan state yang terkait dengan total keranjang, ketersediaan produk, dan biaya pengiriman dapat memicu banyak re-render, yang mengarah pada pengalaman pengguna yang lamban, terutama bagi pengguna dengan koneksi internet yang lebih lambat di pasar negara berkembang. Dengan menerapkan batching React dan teknik seperti debouncing kueri pencarian dan throttling pembaruan pada total keranjang, platform dapat secara signifikan meningkatkan performa dan responsivitas, memastikan pengalaman berbelanja yang lancar bagi pengguna di seluruh dunia.

2. Dasbor Keuangan

Dasbor keuangan menampilkan data pasar real-time, performa portofolio, dan riwayat transaksi. Dasbor perlu sering diperbarui untuk mencerminkan kondisi pasar terbaru. Namun, re-render yang berlebihan dapat menyebabkan antarmuka yang tersendat dan tidak responsif. Dengan memanfaatkan teknik seperti useMemo untuk melakukan memoize pada perhitungan yang mahal dan requestAnimationFrame untuk menyinkronkan pembaruan dengan siklus rendering browser, dasbor dapat mempertahankan pengalaman pengguna yang lancar dan mulus, bahkan dengan pembaruan data berfrekuensi tinggi. Selain itu, server-sent events (SSE), yang sering digunakan untuk streaming data keuangan, sangat diuntungkan dari kemampuan batching otomatis React 18. Pembaruan yang diterima melalui SSE secara otomatis di-batch, mencegah re-render yang tidak perlu.

Kesimpulan

Batching React adalah teknik optimisasi fundamental yang dapat secara signifikan meningkatkan performa aplikasi Anda. Dengan memahami cara kerja batching dan menerapkan strategi optimisasi yang efektif, Anda dapat membangun antarmuka pengguna yang berkinerja dan responsif yang memberikan pengalaman pengguna yang hebat, terlepas dari kompleksitas aplikasi Anda atau lokasi pengguna Anda. Dari batching otomatis di React 18 hingga teknik lanjutan seperti requestAnimationFrame dan flushSync, React menyediakan seperangkat alat yang kaya untuk menyempurnakan pembaruan state dan memaksimalkan performa. Dengan terus memantau dan mengoptimalkan aplikasi React Anda, Anda dapat memastikan bahwa aplikasi tersebut tetap cepat, responsif, dan menyenangkan untuk digunakan oleh pengguna di seluruh dunia.